<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col style="margin-bottom: 12px">
        <h3>
          试卷名称:
          <span style="margin-left: 10px">{{ testPaperName }}</span>
          <span style="margin-left: 20px">满分:</span>
          <span style="margin-left: 10px">{{ allscore }}分</span>
        </h3>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col
        :md="6"
        :sm="12"
        :xs="24"
        style="margin-bottom: 12px"
        v-for="item in classStatisticsList"
        :key="item.classId"
      >
        <el-card class="class-avage-item" shadow="hover">
          <div class="class-avage-item-title">{{ item.className }}</div>
          <div class="class-avage-item-title">
            <p>平均分</p>
            <p style="text-align: center">{{ item.averageScore }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in avageData" :key="index">
      <EchartsCom
        :myOption="item"
        :myStyle="{ width: '100%', height: '450px' }"
      ></EchartsCom>
    </el-row>
  </div>
</template>

<script setup name="TestDetail">
import EchartsCom from "@/components/EchartsCom";
import * as echarts from "echarts";
import { getAnalysis } from "@/api/core/test";
import {
  getCurrentInstance,
  reactive,
  ref,
  toRefs,
  watch,
  computed,
} from "vue";
import { parseTime } from "@/utils/ruoyi";
import useUserStore from "@/store/modules/user";
const topicTypeList = ref([
  { id: 1, label: "单选" },
  { id: 2, label: "多选" },
  { id: 3, label: "判断" },
  { id: 5, label: "填空" },
  { id: 6, label: "简答" },
  { id: 7, label: "编程题" },
]);
const { proxy } = getCurrentInstance();
const testPaperName = ref("");
const classStatisticsList = ref([]);
const allscore = ref(0);
const chartLineData = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "示例",
      type: "bar",
      data: [10, 20, 30, 40],
      markLine: {
        data: [{ type: "average", name: "平均值" }],
      },
    },
    // {
    //   type: "pie",
    //   radius: ["50%", "70%"],
    //   avoidLabelOverlap: false,
    //   label: {
    //     show: false,
    //     position: "center",
    //   },
    //   labelLine: {
    //     show: false,
    //   },
    //   emphasis: {
    //     label: {
    //       show: true,
    //       fontSize: "30",
    //       fontWeight: "bold",
    //     },
    //   },
    //   data: [
    //     { value: 335, name: "A" },
    //     { value: 310, name: "B" },
    //     { value: 234, name: "C" },
    //     { value: 135, name: "D" },
    //     { value: 1548, name: "E" },
    //   ],
    // },
  ],
});
const avageData = ref([]);
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

// 监听路由变化
watch(
  () => route.query,
  (newValue, oldValue) => {
    if (newValue.paperId) {
      allscore.value = newValue.allscore;
      getAnalysis(newValue.paperId).then((res) => {
        console.log("打印试卷详情", res);
        if (res.code == 200) {
          testPaperName.value = res.data.examPaperName;
          classStatisticsList.value = res.data.classStatisticsList;
          avageData.value = res.data.classStatisticsList.map((it) => {
            return {
              title: {
                //设置图表的标题
                text: it.className,
                x: "center", //设置标题位置居中
                textStyle: {
                  //设置主标题的文字风格
                  color: "#333333", //字体颜色
                  fontSize: 30, //文字大小
                },
              },

              tooltip: {
                //触发类型
                trigger: "item", //item默认为图形触发 还有axis坐标轴触发
              },

              xAxis: {
                type: "category",
                data: it.studentStatisticsList.map((ele) => ele.stuName),
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: it.className,
                  type: "bar",
                  data: it.studentStatisticsList.map((ele) => ele.score),
                  // 渐变颜色
                  itemStyle: {
                    normal: {
                      color: function (params) {
                        let colorList = [
                          ["#FA897B", "#FFDD94"],
                          ["#D0E6A5", "#FFDD94"],
                          ["#4675C0", "#B8BFD6"],
                          ["#86E3CE", "#CCABD8"],
                          ["#64A4D6", "#C782C2"],
                          ["#bdc2e8", "#e6dee9"],
                          ["#FFA876", "#FF5B00"],
                        ];
                        let colorItem = colorList[params.dataIndex];
                        return new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1, //y->y2
                          [
                            {
                              offset: 0,
                              color: colorItem[0],
                            },
                            {
                              offset: 1,
                              color: colorItem[1],
                            },
                          ],
                          false
                        );
                      },
                    },
                  },
                  markLine: {
                    data: [{ type: "average", name: "平均分" }],
                  },
                },
              ],
            };
          });
        }
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.class-avage-item {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .class-avage-item-title {
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>
